<template>
	<view class="redEnvelopeBox">
		<view class="cont">
			<image src="../../static/bg_quanmin.png" mode="widthFix" class="bgImg"></image>
			<view class="myBurseBox">
				<view class="title">我的奖学金</view>
				<view class="money">¥ 124.13</view>
				<view class="hint">距离奖学金清零还有</view>
				<view class="dowmTimeBox">
					<uni-countdown class="dowmTime" color="#FFFFFF" background-color="#ee1414" border-color="#ee1414" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
				</view>
				<view class="useBtn">立即使用</view>
			</view>
			<view class="firstWay">
				<view class="titleBox justify_center">
					<image src="../../static/ic_left.png" mode="widthFix"></image>
					<text>方法1 签到学习 奖金不停</text>
					<image src="../../static/ic_right.png" mode="widthFix"></image>
				</view>
				<view class="signIn" :class="{ signed: sign }" @click="signClick">{{ sign ? '已签到' : '签到' }}</view>
				<view class="footer">每日来签到 领取更多奖学金</view>
			</view>
			<view class="secondWay">
				<view class="titleBox justify_center">
					<image src="../../static/ic_left.png" mode="widthFix"></image>
					<text>方法2 每日抽奖 好运连连</text>
					<image src="../../static/ic_right.png" mode="widthFix"></image>
				</view>
				<!-- 抽奖 -->
				<view id="luckdraw_box">
					<view id="luckdraw_back"><image :style="'transform:rotate(' + change_angle + 'deg)'" mode="scaleToFill" src="../../static/zhuanpan1.png"></image></view>
					<view id="luckdraw_pointer" @click="luckDrawStart"><image mode="scaleToFill" src="../../static/zhizhen.webp"></image></view>
				</view>
				<view class="footer">
					今天还有
					<text>{{ available_num }}</text>
					次抽奖机会
				</view>
			</view>
			<view class="thirdlyWay">
				<view class="titleBox justify_center">
					<image src="../../static/ic_left.png" mode="widthFix"></image>
					<text>奖学金抵扣专区已开启</text>
					<image src="../../static/ic_right.png" mode="widthFix"></image>
				</view>
				<view class="hint">爆款好课限时抢购</view>
				<view class="iconBox"><image src="../../static/ic_direction.png" mode="widthFix"></image></view>
				<view class="useBtn">立即抢GO</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			is_play: false, // 是否在运动中，避免重复启动bug
			available_num: 3, // 可用抽奖的次数，可自定义设置或者接口返回
			start_angle: 0, // 转动开始时初始角度=0位置指向正上方，按顺时针设置，可自定义设置
			base_circle_num: 6, // 基本圈数，就是在转到（最后一圈）结束圈之前必须转够几圈 ，可自定义设置
			low_circle_num: 4, // 在第几圈开始进入减速圈（必须小于等于基本圈数），可自定义设置
			add_angle: 10, // 追加角度，此值越大转动越快，请保证360/add_angle=一个整数，比如1/2/3/4/5/6/8/9/10/12等
			use_speed: 10, // 当前速度，与正常转速值相等
			nor_speed: 10, // 正常转速，在减速圈之前的转速，可自定义设置
			low_speed: 50, // 减速转速，在减速圈的转速，可自定义设置
			end_speed: 50, // 最后转速，在结束圈的转速，可自定义设置
			random_angle: 50, // 中奖角度，也是随机数，也是结束圈停止的角度，这个值采用系统随机或者接口返回
			change_angle: 0, // 变化角度计数，0开始，一圈360度，基本是6圈，那么到结束这个值=6*360+random_angle；同样change_angle/360整除表示走过一整圈
			result_val: '未中奖', // 存放奖项容器，可自定义设置
			Jack_pots: [
				// 奖项区间 ，360度/奖项个数 ，一圈度数0-360，可自定义设置
				// random_angle是多少，在那个区间里面就是中哪个奖项
				{
					startAngle: 0,
					endAngle: 60,
					val: '奖学金x10'
				},
				{
					startAngle: 61,
					endAngle: 120,
					val: '精品图书'
				},
				{
					startAngle: 121,
					endAngle: 180,
					val: '奖学金x5'
				},
				{
					startAngle: 181,
					endAngle: 240,
					val: '扫地机器人'
				},
				{
					startAngle: 241,
					endAngle: 300,
					val: '奖学金x15'
				},
				{
					startAngle: 301,
					endAngle: 360,
					val: '苹果手机'
				}
			],
			sign: false
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		// this.luckDrawStart();
	},
	methods: {
		/**
		 * 启动抽奖
		 */
		luckDrawStart() {
			// 检查可用抽奖的次数
			if (this.available_num <= 0) {
				uni.showToast({
					title: '抽奖次数已用完了',
					icon: 'none'
				});
				return;
			}
			// 阻止运动中重复点击
			if (!this.is_play) {
				// 设置标识在运动中
				this.is_play = true;
				// 重置参数
				this.luckDrawReset();
				// 几率随机，也可从服务端获取几率
				this.random_angle = Math.ceil(Math.random() * 360)
				// 运动函数
				setTimeout(this.luckDrawChange, this.use_speed);
			}
		},

		/**
		 * 转盘运动
		 */
		luckDrawChange() {
			// 继续运动
			if (this.change_angle >= this.base_circle_num * 360 - this.random_angle) {
				// 已经到达结束位置
				// 提示中奖，
				this.getLuckDrawResult();
				// 运动结束设置可用抽奖的次数和激活状态设置可用
				this.luckDrawEndset();
			} else {
				// 运动
				if (this.change_angle < this.low_circle_num * 360) {
					// 正常转速
					// console.log("正常转速")
					this.use_speed = this.nor_speed;
				} else if (this.change_angle >= this.low_circle_num * 360 && this.change_angle <= this.base_circle_num * 360) {
					// 减速圈
					// console.log("减速圈")
					this.use_speed = this.low_speed;
				} else if (this.change_angle > this.base_circle_num * 360) {
					// 结束圈
					// console.log("结束圈")
					this.use_speed = this.end_speed;
				}
				// 累加变化计数
				this.change_angle =
					this.change_angle + this.add_angle >= this.base_circle_num * 360 - this.random_angle
						? this.base_circle_num * 360 - this.random_angle
						: this.change_angle + this.add_angle;

				setTimeout(this.luckDrawChange, this.use_speed);
			}
		},

		/**
		 * 重置参数
		 */
		luckDrawReset() {
			// 转动开始时首次点亮的位置，可自定义设置
			this.start_angle = 0;
			// 当前速度，与正常转速值相等
			this.use_speed = this.nor_speed;
			// 中奖索引，也是随机数，也是结束圈停止的位置，这个值采用系统随机或者接口返回

			this.random_angle = 0;

			// 变化计数，0开始，必须实例有12个奖项，基本是6圈，那么到结束这个值=6*12+random_number；同样change_num/12整除表示走过一整圈
			this.change_angle = 0;
		},

		/**
		 * 获取抽奖结果
		 */
		getLuckDrawResult() {
			for (var j = 0; j < this.Jack_pots.length; j++) {
				if (this.random_angle >= this.Jack_pots[j].startAngle && this.random_angle <= this.Jack_pots[j].endAngle) {
					this.result_val = this.Jack_pots[j].val;
					uni.showModal({
						title: '抽奖结果',
						content: this.Jack_pots[j].val
					});
					break;
				}
			}
		},

		/**
		 * 更新状态（运动结束设置可用抽奖的次数和激活状态设置可用）
		 */
		luckDrawEndset() {
			// 是否在运动中，避免重复启动bug
			this.is_play = false;
			// 可用抽奖的次数，可自定义设置
			this.available_num = this.available_num - 1;
		},
		// 签到
		signClick() {
			this.sign = !this.sign;
		}
	}
};
</script>

<style lang="scss">
.redEnvelopeBox {
	.cont {
		.bgImg {
			width: 100%;
		}
		.myBurseBox {
			text-align: center;
			color: #fff;
			position: absolute;
			top: 580rpx;
			left: 50rpx;
			right: 50rpx;
			.title {
				color: #fedfb6;
				font-size: 34rpx;
				font-weight: bold;
			}
			.money {
				color: #fedfb6;
				font-size: 80rpx;
				font-weight: bold;
				margin: 20rpx;
			}
			.hint {
				font-size: 30rpx;
			}
			.dowmTimeBox {
				margin: 20rpx auto;
				width: 300rpx;
				text-align: center;
			.dowmTime {
				/deep/span {
					color: #fff;
				}
				/deep/.uni-countdown__splitor  {
					color: #fff !important;
				}
			}
			}
		}
		.useBtn {
			width: 400rpx;
			height: 80rpx;
			margin: 0 auto;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ee1414;
			border-radius: 40rpx;
			background: linear-gradient(to bottom, #fef0c3, #fee715);
		}
		.titleBox {
			color: #fedfb6;
			font-size: 46rpx;
			image {
				width: 50rpx;
			}
		}
		.firstWay {
			text-align: center;
			color: #fff;
			position: absolute;
			top: 1120rpx;
			left: 50rpx;
			right: 50rpx;
			text-align: center;

			.signIn {
				color: #ee1414;
				background: linear-gradient(to bottom, #fedd8d, #fee715);
				font-size: 30rpx;
				width: 200rpx;
				height: 200rpx;
				line-height: 200rpx;
				text-align: center;
				border-radius: 50%;
				margin: 40rpx auto;
				border: 20rpx solid #f78117;
				&.signed {
					background: linear-gradient(to bottom, #f78117, #f76d10);
				}
			}
			.footer {
				color: #fff;
				font-size: 34rpx;
			}
		}
		.secondWay {
			text-align: center;
			color: #fff;
			position: absolute;
			top: 1680rpx;
			left: 50rpx;
			right: 50rpx;
			text-align: center;
			.footer {
				color: #fff;
				font-size: 34rpx;
				margin-top: 20rpx;
				text {
					color: #ffec07;
					font-size: 36rpx;
					margin: 0 20rpx;
				}
			}
		}
		.thirdlyWay {
			text-align: center;
			color: #fff;
			position: absolute;
			top: 2560rpx;
			left: 50rpx;
			right: 50rpx;
			text-align: center;
			.hint {
				margin: 40rpx 0;
				font-size: 30rpx;
			}
			.iconBox {
				text-align: center;
				margin: 20rpx;
				image {
					width: 250rpx;
				}
			}
		}
		#luckdraw_box {
			width: 531rpx;
			height: 531rpx;
			margin: 40rpx auto;
			position: relative;
			#luckdraw_back {
				width: 100%;
				height: 100%;
				image {
					display: block;
					width: 100%;
					height: 100%;
					transform-origin: center center;
				}
			}
			#luckdraw_pointer {
				width: 178rpx;
				height: 234rpx;
				position: absolute;
				left: 178.5rpx;
				z-index: 999;
				top: 128rpx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
